<template>
  <div class="dashboard-container">
    <!-- 数据概览卡片 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="6" v-for="card in cardList" :key="card.title">
        <el-card class="data-card" :body-style="{ padding: '20px' }">
          <div class="card-content">
            <div :class="['card-icon', card.type]">
              <el-icon class="icon-large">
                <component :is="card.icon" />
              </el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">{{ card.title }}</div>
              <div class="card-value">{{ card.value }}</div>
              <div class="card-compare">
                较昨日
                <span :class="card.trend === 'up' ? 'up' : 'down'">
                  {{ card.change }}
                  <el-icon>
                    <component :is="card.trend === 'up' ? 'CaretTop' : 'CaretBottom'" />
                  </el-icon>
                </span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 订单状态和销售趋势 -->
    <el-row :gutter="20" class="mt-20">
      <el-col :xs="24" :lg="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>销售趋势</span>
              <div class="header-right">
                <el-radio-group v-model="timeRange" size="small" @change="handleTimeRangeChange">
                  <el-radio-button label="week">本周</el-radio-button>
                  <el-radio-button label="month">本月</el-radio-button>
                  <el-radio-button label="year">全年</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </template>
          <div class="chart-container">
            <div class="chart-header">
              <div class="chart-title">
                <h3>销售趋势</h3>
                <span class="chart-subtitle">近7天销售数据分析</span>
              </div>
              <div class="chart-info">
                <div class="info-item">
                  <span class="label">总销售额</span>
                  <span class="value">¥ 126,560</span>
                  <div class="trend up">
                    <el-icon><CaretTop /></el-icon>
                    <span>12.5%</span>
                  </div>
                </div>
                <div class="info-item">
                  <span class="label">总订单量</span>
                  <span class="value">1,280</span>
                  <div class="trend up">
                    <el-icon><CaretTop /></el-icon>
                    <span>8.2%</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="chart-content">
              <div class="simple-chart">
                <div v-for="(item, index) in salesData" :key="index" class="chart-bar">
                  <div class="bar-wrapper">
                    <div 
                      class="bar" 
                      :style="{ height: `${item.percentage}%`, backgroundColor: item.color }"
                    >
                      <span class="bar-value">{{ item.value }}</span>
                    </div>
                  </div>
                  <span class="bar-label">{{ item.date }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :lg="8">
        <el-card class="order-status-card">
          <template #header>
            <div class="card-header">
              <span>订单状态</span>
              <el-button type="primary" link @click="handleMoreOrders">查看更多</el-button>
            </div>
          </template>
          <div class="order-status-list">
            <div v-for="status in orderStatus" :key="status.type" class="status-item" @click="handleStatusClick(status.type)">
              <div class="status-count">{{ status.count }}</div>
              <div class="status-text">{{ status.text }}</div>
              <el-progress 
                :percentage="status.percentage" 
                :color="status.color"
                :show-text="false"
                :stroke-width="4"
              />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 待办事项和库存预警 -->
    <el-row :gutter="20" class="mt-20">
      <el-col :xs="24" :lg="12">
        <el-card class="todo-card">
          <template #header>
            <div class="card-header">
              <span>待办事项</span>
              <el-tag type="danger" size="small" v-if="todos.length">{{ todos.length }}个待处理</el-tag>
            </div>
          </template>
          <el-scrollbar max-height="300px">
            <div class="todo-list">
              <div v-for="(todo, index) in todos" :key="index" class="todo-item">
                <div class="todo-content">
                  <el-tag :type="todo.type" size="small" class="todo-tag">{{ todo.tag }}</el-tag>
                  <span class="todo-text">{{ todo.content }}</span>
                </div>
                <div class="todo-time">{{ todo.time }}</div>
              </div>
            </div>
          </el-scrollbar>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :lg="12">
        <el-card class="stock-card">
          <template #header>
            <div class="card-header">
              <span>库存预警</span>
              <el-button type="primary" link @click="handleStockManage">库存管理</el-button>
            </div>
          </template>
          <el-table :data="stockWarnings" style="width: 100%" size="small">
            <el-table-column prop="name" label="商品名称" />
            <el-table-column prop="stock" label="当前库存" width="100" align="center" />
            <el-table-column prop="warning" label="警戒值" width="100" align="center" />
            <el-table-column label="状态" width="100" align="center">
              <template #default="{ row }">
                <el-tag :type="row.stock <= row.warning ? 'danger' : 'warning'" size="small">
                  {{ row.stock <= row.warning ? '库存不足' : '库存偏低' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Money, ShoppingCart, Goods, User,
  CaretTop, CaretBottom,
  TrendCharts, // 添加趋势图图标
  Box, // 添加箱子图标
  Timer, // 添加时钟图标
  Warning // 添加警告图标
} from '@element-plus/icons-vue'

const router = useRouter()
const timeRange = ref('week')

// 数据概览卡片数据
const cardList = [
  {
    title: '昨日收入',
    value: '¥ 28,560',
    change: '12%',
    trend: 'up',
    type: 'success',
    icon: Money
  },
  {
    title: '待处理订单',
    value: '85',
    change: '8%',
    trend: 'up',
    type: 'primary',
    icon: ShoppingCart
  },
  {
    title: '库存预警',
    value: '12',
    change: '3%',
    trend: 'down',
    type: 'warning',
    icon: Warning
  },
  {
    title: '今日访客',
    value: '368',
    change: '15%',
    trend: 'up',
    type: 'info',
    icon: User
  }
]

// 订单状态数据
const orderStatus = [
  { type: 'pending', text: '待付款', count: 24, percentage: 70, color: '#e6a23c' },
  { type: 'processing', text: '待发货', count: 85, percentage: 90, color: '#409eff' },
  { type: 'shipping', text: '配送中', count: 45, percentage: 60, color: '#67c23a' },
  { type: 'refund', text: '退款/售后', count: 12, percentage: 30, color: '#f56c6c' }
]

// 待办事项数据
const todos = [
  { type: 'danger', tag: '紧急', content: '新订单 #2023112801 需要立即处理', time: '10分钟前' },
  { type: 'warning', tag: '提醒', content: '办公椅库存不足，请及时补货', time: '30分钟前' },
  { type: 'primary', tag: '通知', content: '客户投诉工单待处理', time: '1小时前' },
  { type: 'info', tag: '消息', content: '系统将于今晚23:00进行维护', time: '2小时前' },
  { type: 'warning', tag: '提醒', content: '3个订单超时未发货', time: '3小时前' }
]

// 库存预警数据
const stockWarnings = [
  { name: '现代简约办公椅', stock: 8, warning: 10 },
  { name: '北欧风格书柜', stock: 5, warning: 15 },
  { name: '实木餐桌', stock: 3, warning: 5 },
  { name: '皮质沙发', stock: 12, warning: 20 }
]

// 销售数据
const salesData = [
  { date: '周一', value: '15,200', percentage: 45, color: '#409EFF' },
  { date: '周二', value: '28,600', percentage: 85, color: '#409EFF' },
  { date: '周三', value: '18,900', percentage: 56, color: '#409EFF' },
  { date: '周四', value: '32,100', percentage: 95, color: '#409EFF' },
  { date: '周五', value: '25,800', percentage: 76, color: '#409EFF' },
  { date: '周六', value: '35,200', percentage: 100, color: '#409EFF' },
  { date: '周日', value: '28,900', percentage: 86, color: '#409EFF' }
]

// 事件处理
const handleTimeRangeChange = (value: string) => {
  console.log('Time range changed:', value)
}

const handleMoreOrders = () => {
  router.push('/order/list')
}

const handleStatusClick = (type: string) => {
  router.push({
    path: '/order/list',
    query: { status: type }
  })
}

const handleStockManage = () => {
  router.push('/warehouse/stock')
}
</script>

<style scoped lang="scss">
.dashboard-container {
  .data-card {
    margin-bottom: 20px;
    transition: all 0.3s;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    }
    
    .card-content {
      display: flex;
      align-items: center;
      
      .card-icon {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        margin-right: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &.success { 
          background-color: #f0f9eb; 
          .el-icon { color: #67c23a; }
        }
        &.primary { 
          background-color: #ecf5ff; 
          .el-icon { color: #409eff; }
        }
        &.warning { 
          background-color: #fdf6ec; 
          .el-icon { color: #e6a23c; }
        }
        &.info { 
          background-color: #f4f4f5; 
          .el-icon { color: #909399; }
        }
        
        .el-icon {
          font-size: 30px;
        }
      }
      
      .card-info {
        flex: 1;
        
        .card-title {
          font-size: 14px;
          color: #909399;
        }
        
        .card-value {
          font-size: 24px;
          font-weight: bold;
          margin: 8px 0;
        }
        
        .card-compare {
          font-size: 12px;
          color: #909399;
          
          .up { color: #67c23a; }
          .down { color: #f56c6c; }
        }
      }
    }
  }

  .order-status-card {
    .order-status-list {
      .status-item {
        padding: 16px 0;
        cursor: pointer;
        border-bottom: 1px solid #ebeef5;
        
        &:last-child {
          border-bottom: none;
        }
        
        &:hover {
          background-color: #f5f7fa;
        }
        
        .status-count {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 8px;
        }
        
        .status-text {
          font-size: 14px;
          color: #606266;
          margin-bottom: 8px;
        }
      }
    }
  }

  .todo-card {
    .todo-list {
      .todo-item {
        padding: 12px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ebeef5;
        
        &:last-child {
          border-bottom: none;
        }
        
        .todo-content {
          display: flex;
          align-items: center;
          
          .todo-tag {
            margin-right: 8px;
          }
          
          .todo-text {
            color: #606266;
          }
        }
        
        .todo-time {
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }

  .chart-container {
    padding: 20px;
    height: 400px;
    display: flex;
    flex-direction: column;

    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 30px;

      .chart-title {
        h3 {
          margin: 0;
          font-size: 18px;
          color: #303133;
        }

        .chart-subtitle {
          font-size: 12px;
          color: #909399;
          margin-top: 4px;
          display: block;
        }
      }

      .chart-info {
        display: flex;
        gap: 24px;

        .info-item {
          text-align: right;

          .label {
            font-size: 12px;
            color: #909399;
            display: block;
          }

          .value {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
            margin: 4px 0;
            display: block;
          }

          .trend {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            font-size: 12px;
            gap: 4px;

            &.up {
              color: #67c23a;
            }

            &.down {
              color: #f56c6c;
            }
          }
        }
      }
    }

    .chart-content {
      flex: 1;
      min-height: 0;

      .simple-chart {
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding: 0 20px;

        .chart-bar {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 0 10px;

          .bar-wrapper {
            width: 40px;
            height: 200px;
            display: flex;
            align-items: flex-end;
            margin-bottom: 8px;

            .bar {
              width: 100%;
              background-color: #409EFF;
              border-radius: 4px;
              transition: all 0.3s;
              position: relative;
              cursor: pointer;

              &:hover {
                opacity: 0.8;
                transform: scaleY(1.02);
              }

              .bar-value {
                position: absolute;
                top: -20px;
                left: 50%;
                transform: translateX(-50%);
                font-size: 12px;
                color: #606266;
                white-space: nowrap;
                opacity: 0;
                transition: opacity 0.3s;
              }

              &:hover .bar-value {
                opacity: 1;
              }
            }
          }

          .bar-label {
            font-size: 12px;
            color: #909399;
          }
        }
      }
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mt-20 {
    margin-top: 20px;
  }
}

// 响应式调整
@media screen and (max-width: 768px) {
  .dashboard-container {
    .data-card {
      .card-content {
        .card-icon {
          font-size: 36px;
          padding: 12px;
        }
        
        .card-info {
          .card-value {
            font-size: 20px;
          }
        }
      }
    }
  }
}
</style> 